<template>
  <div class="red-packet-box">
    <div class="red-packet-content">
      <van-icon class="close-icon" name="close" size="30" color="#afafaf" @click="$router.back()" />
      <div style="text-align: center; padding: 0 20px;">
        <div>{{ info.sponsor }}</div>
        <h1>红包</h1>
        <div>领取期限：{{ info.startTime }} 至 {{ info.endTime }}</div>
        <div>
          <van-button v-if="info.awardStatua == '0'" round block plain style="margin: 20px 0;" @click="show = true">立即领奖</van-button>
          <van-button v-if="info.awardStatua != '0'" round block plain style="background-color: #f7f7f7;margin: 20px 0;" :disabled="true">已兑奖</van-button>
        </div>
        <van-button round block type="success" color="#f33163" to="/redPacket/detail">查看详情</van-button>
      </div>
      <van-divider dashed :style="{ borderColor: '#8f8f8f' }"></van-divider>
      <van-cell title="兑奖券详情" :label="'兑奖期限：'+ info.startTime + '至' + info.endTime" />
      <van-cell title="主办单位介绍" is-link :arrow-direction="sponsorDescShow ? 'down' : 'right'" @click="sponsorDescShow = !sponsorDescShow">
        <template #label v-if="sponsorDescShow">
          <div v-html="info.sponsorDesc"></div>
        </template>
      </van-cell>
    </div>     
    
    <van-dialog v-model:show="show" show-cancel-button @confirm="onConfirm">
      <van-form style="margin-top: 20px;">
        <van-cell-group inset>
          <van-field
            v-model="form.mobile"
            name="mobile"
            label="手机号码"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请输入手机号码' }]"
          />
          <van-field
            v-model="form.mobileCode"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getAwardsInfoByTask, sendSms } from '@/api/task'
import { useRoute } from 'vue-router';
import dayjs from 'dayjs'

const route = useRoute()

const userTaskId = route.query.userTaskId || ''
const memberId = localStorage.getItem('token')

const info = ref({
  sponsor: '广西壮族自治区中医药管理局',
  awardName: '红包', // 奖项名称
  awardStatua: '0', // 兑奖状态：0 未兑奖，1 已兑奖，2 已过期
  startTime: '2023-01-01 00:00:00', // 兑奖期限 - 开始时间
  endTime: '2024-01-01 00:00:00', // 兑奖期限 - 结束时间
  sponsorDesc: '主办单位介绍', // 主办单位介绍
})
const sponsorDescShow = ref(false)

const show = ref(false);
const form = ref({
  mobile: '',
  mobileCode: '',
})

getInfo()

function getInfo() {
  getAwardsInfoByTask({userTaskId, memberId}).then((res: any) => {
    if (res.code == 200) {
      info.value = res.data
      if (res.data.startTime) {
        info.value.startTime = dayjs(res.data.startTime).format('YYYY-MM-DD HH:mm:ss')
      }
      if (res.data.endTime) {
        info.value.endTime = dayjs(res.data.endTime).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  })
}

function sendCode() {
  sendSms(form.value.mobile, 8888).then((res: any) => {
    console.log(res, 'res');
    if (res.code == 200) {
      // todo 倒计时 不可点击      
      
    }
  })

}

function onConfirm() {
  // 提交手机号码和验证码
  console.log(form.value, 'form');
  
}
</script>

<style scoped lang="less">
.red-packet-box{
  background-color: #9b203d;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;

  .red-packet-content{
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    padding: 20px 0;

    .close-icon{
      text-align: right;
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
}
</style>